Skip to content

Agentic UI: Preview Panel Grows to Fill Space When Resizing App Window#3850

Open
shaunandrews wants to merge 3 commits into
trunkfrom
refactor-panel-resizing
Open

Agentic UI: Preview Panel Grows to Fill Space When Resizing App Window#3850
shaunandrews wants to merge 3 commits into
trunkfrom
refactor-panel-resizing

Conversation

@shaunandrews

@shaunandrews shaunandrews commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

This PR aims to improve the way window and panel resizing works in the new Studio Agentic UI, which is currently hidden behind a feature flag.

Currently in trunk the preview panel's width remains fixed as the window is resized, while the chat panel's width fills the available space. This is awkward; when the preview is open, I expect it to change its size as the window is resized, with the chat remaining stationary. Otherwise, resizing the preview requires two steps: resizing the window, then resizing the preview panel.

In this PR, resizing the window keeps the chat panel's width stationary, and allows the preview panel (if open) to fill the available space. The preview nows stores studio-ui-preview-content-width which maps to:

total available width - remembered content/chat width = preview/browser width

There's also logic in resizable-panels.ts (81) to prevent the preview and chat panels from getting too small.

Proposed Changes

  • Introduces a shared usePointerDrag primitive (primary-button filtering, rAF throttling, cursor/user-select management, teardown on unmount/external-cancel) and moves the sidebar's resize hook onto it — removing duplicated drag plumbing with no change to sidebar behavior.
  • Reworks the site-preview split so the content column keeps a fixed width and the preview absorbs window growth/shrink, driven by a single clamp (getPreviewSplitLayout) that owns the min-width floors. CSS becomes a pure consumer instead of running a second, divergent clamp. Persists the user's content width and migrates the legacy preview-width preference.
  • The divider's reported size and the rendered layout now stay in sync on window/sidebar resize.

File changes

  • use-pointer-drag.ts (line 32) extracts raw drag plumbing: mouse down, document mousemove/mouseup, cursor changes, requestAnimationFrame, cancel on unmount.
  • use-resizable-panel.ts (line 17) now uses that shared drag hook for the sidebar. Sidebar behavior should be basically unchanged.
  • use-preview-split.ts (line 38) is the new preview-specific brain. It measures the frame, remembers preferred content width, handles preview drag/keyboard resize, reacts to window/container resize, and migrates the old preview-width storage key.
  • PreviewSplitFrame (line 22) becomes mostly layout/animation. It no longer owns the sizing math.
    layout-dashboard (line 73) changes preview rendering to a function so PreviewSplitFrame can tell SitePreview whether it is collapsed during open/close.

Testing Instructions

  1. Open the agentic UI and open a site preview.
  2. Drag the preview divider — the content column stays put, the preview resizes; both honor their minimum widths.
  3. Resize the OS window with the preview open — the content column stays a fixed width and the preview absorbs the change; shrinking keeps the preview above its minimum.
  4. Toggle the preview open/closed — the slide animation plays once and the webview stays warm.
  5. Resize the sidebar — behavior unchanged (regression check).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@shaunandrews shaunandrews changed the title Refactor panel resizing onto a shared drag primitive and a single clamp Agentic UI Resizing: Refactor panel resizing onto a shared drag primitive and a single clamp Jun 17, 2026
@shaunandrews shaunandrews changed the base branch from agentic/window-resizing-fixes to trunk June 17, 2026 15:25
@shaunandrews shaunandrews changed the title Agentic UI Resizing: Refactor panel resizing onto a shared drag primitive and a single clamp Agentic UI: Refactor panel resizing onto a shared drag primitive and a single clamp Jun 17, 2026
@shaunandrews shaunandrews changed the title Agentic UI: Refactor panel resizing onto a shared drag primitive and a single clamp Agentic UI: Preview Panel Grows to Fill Space When Resizing App Window Jun 17, 2026
@shaunandrews shaunandrews marked this pull request as ready for review June 17, 2026 16:23
@shaunandrews shaunandrews requested review from a team and bcotrim June 17, 2026 16:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant